﻿@model CanDichVu.Db.ThanhVien
@{
    ViewBag.Title = "Đăng ký thành viên | Dịch vụ rao văt toàn quốc";
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        HttpMethod = "post",
        OnComplete = "completedAjaxRequest"
        //OnBegin = "show_Loading",
    };
}

<div class="b-login">
    <div class="b-login-l">
        <span class="ttlogin">Đăng ký thành viên với chúng tôi<br>
            <br>
            <h2>Bạn sẽ có cơ hội trải nghiệm...</h2>
        </span>
        <ul class="aboutsv">
            <li>
                <img src="/Content/images/trans.gif" title="" alt="" class="imgsv sv1">
                <span class="info">
                    <h2>Quản lý và chăm sóc khách hàng</h2>
                    <p>
                        Nhiều phương thức để tìm kiếm khách hàng; chủ động tư vấn, tạo mối liên hệ và giới
                                thiệu sản phẩm.
                    </p>
                </span></li>
            <li>
                <img src="/Content/images/trans.gif" title="" alt="" class="imgsv sv2">
                <span class="info">
                    <h2>Quản lý sản phẩm dịch vụ của bạn</h2>
                    <p>
                        Giúp bạn dễ dàng quản lý sản phẩm dịch vụ của mình.
                    </p>
                </span></li>
            <li>
                <img src="/Content/images/trans.gif" title="" alt="" class="imgsv sv3">
                <span class="info">
                    <h2>Tăng lượt khách hàng cho bạn</h2>
                    <p>
                        Đăng tin nhanh, hiệu quả. Nhận được sự hỗ trợ của Candichvu.com để có hiệu quả tối ưu.
                    </p>
                </span></li>
            <li>
                <img src="/Content/images/trans.gif" title="" alt="" class="imgsv sv2">
                <span class="info">
                    <h2>Quản lý công việc</h2>
                    <p>
                        Giúp bạn quản lý công việc, nhắc việc hàng ngày.
                    </p>
                </span></li>
            <li>
                <img src="/Content/images/trans.gif" title="" alt="" class="imgsv sv4">
                <span class="info">
                    <h2>Và hơn thế nữa...</h2>
                </span></li>
            <li><b>Bạn đã có tài khoản?</b><input type="submit" class="btnsubmit but_account" value="Đăng nhập thành viên" onclick="window.location = '/dang-nhap-thanh-vien'"></li>
        </ul>
    </div>
    <div class="b-login-r">
        
        <div class="formdangky">
            @using (Ajax.BeginForm("Register", "Account", null, ajaxOpts, new { enctype = "multipart/form-data", name = "frm_register", id = "frm_register" }))
            {
                <h2 class="h2_title_account_login_res">Thông tin đăng ký thành viên</h2>
                 @Html.HiddenFor(model => model.GioiTinh)
                <ul class="formreg">
                    <li></li>
                    <li class="warning-area"></li>
                    <li><label class="left">Tên đăng nhập</label> <span class="right">
                        @Html.TextBoxFor(model => model.UserName, new { name = "txt_UserName", @placeholder = "Tên đăng nhập (bắt buộc từ 3 -> 9 ký tự)", value = "", style = "width: 86%;" })
                        <span id="user-result-check"></span>
                    </span>
                    </li>
                    <li><label class="left">Mật khẩu</label> <span class="right">
                        @Html.PasswordFor(model => model.Pass, new { name = "Pass", @placeholder = "Mật khẩu (bắt buộc từ 3 -> 9 ký tự)", value = "", style = "width: 86%;" })
                    </span>
                    </li>
                    <li><label class="left">Email</label> <span class="right">
                        @Html.TextBoxFor(model => model.Email, new { name = "txt_email", @placeholder = "Email (bắt buộc)", value = "", style = "width: 86%;" })
                        <span id="email-result-check"></span>
                    </span>
                    </li>
                    <li class="line"><label class="left">Họ tên</label> <span class="right">
                        @Html.TextBoxFor(model => model.HoTen, new { name = "HoTen", @placeholder = "Họ tên (bắt buộc)", value = "", style = "width: 86%;" })
                    </span>
                    </li>
                    <li class="fone_num"><label class="left">Điện thoại</label> <span class="right">
                        @Html.TextBoxFor(model => model.DT, new { name = "DT", @placeholder = "Điện thoại (bắt buộc)", value = "", style = "width: 86%;" })
                    </span>
                    </li>
                   @* <li class="fone_num"><label class="left">Ngày sinh</label> <span class="right">
                        @Html.TextBoxFor(model => model.NgaySinh, new { name = "NgaySinh", @placeholder = "Ngày sinh", value = "", style = "width: 86%;" })
                    </span>
                    </li>*@
                     <li class="fone_num"><label class="left">Nick Skype</label> <span class="right">
                        @Html.TextBoxFor(model => model.Skype, new { name = "Skype", @placeholder = "Nick Skype", value = "", style = "width: 86%;" })
                    </span>
                    </li>
                    <li class="fone_num"><label class="left">Nick Yahoo</label> <span class="right">
                        @Html.TextBoxFor(model => model.Yahoo, new { name = "Yahoo", @placeholder = "Nick Yahoo", value = "", style = "width: 86%;" })
                    </span>
                    </li>
                    <li class="fone_num">
                        <div class="clear"></div>
                         <div class="right">
                            @Html.Partial("_Captcha", new CanDichVU.Models.Captcha())
                            @Html.Partial("_InvisibleCaptcha", new CanDichVU.Models.InvisibleCaptcha())
                         </div>
                    </li>
                    <li class="fone_num"><span class="left">Giới tính : </span> <span class="right">
                        <select id="selectMadel" onchange="selectChangeMadel()">
                            <option value="0">Không muốn công khai ...</option>
                            <option value="1" >Nam</option>
                            <option value="2">Nữ</option>
                        </select>
                    </span>
                    </li>
                    <li><span class="left">&nbsp;</span> <span class="right text_confirm">Nhấn nút "Đăng ký thành viên" là bạn đã đồng ý với các
                        @Html.ActionLink("điều khoản candichvu.com", "Topic", "Home", new { name = "DKSD" }, new { @class = "fancybox fancybox.iframe" })
                    </span></li>
                    <li class="line"><span class="left">&nbsp;</span> <span class="right">
                        <input type="submit" style="border: 0;" onclick="return loadmaskloading();" class="btnsubmit" value="Đăng ký thành viên" name=""></span>
                    </li>
                </ul>
            }
        </div>

    </div>
</div>
<link href="~/Scripts/jquery-loadmask/jquery.loadmask.css" rel="stylesheet" />
<link href="~/Scripts/jquery-capslock-detector/css/jquery.capsalerttipsy.css" rel="stylesheet" />
<script src="~/Scripts/jquery-capslock-detector/js/jquery.tipsy.js"></script>
<script src="~/Scripts/jquery-capslock-detector/js/jquery.jccapsalert.js"></script>
<script src="~/Scripts/jquery-loadmask/jquery.loadmask.js"></script>

<script type="text/javascript">

    function loadmaskloading() {
        $(".formdangky").mask("Dữ liệu đang xử lý...", 500);
    }

    function selectChangeMadel() {
        var value_nn = $("#selectMadel").val();
        $("#GioiTinh").val(value_nn);
    }

    $(document).ready(function () {

        //$("#NgaySinh").datepicker({
        //    dateFormat: 'dd/mm/yy',
        //    changeMonth: true,
        //    changeYear: true,
        //    yearRange: '-100y:c+nn',
        //    monthNames: ['Tháng Một', 'Tháng Hai', 'Tháng Ba', 'Tháng Tư', 'Tháng Năm', 'Tháng Sáu','Tháng Bảy', 'Tháng Tám', 'Tháng Chín', 'Tháng Mười', 'Th.Mười Một', 'Th.Mười Hai'],
        //    monthNamesShort: ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6','Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'],
        //    dayNames: ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
        //    dayNamesShort: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'],
        //    dayNamesMin: ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
        //});


        jQuery("#Pass").CapsLockAlert();

        $("#UserName").keyup(function (e) {

            //removes spaces from username
            $(this).val($(this).val().replace(/\s/g, ''));

            var username = $(this).val();
            if (username.length < 3) { $("#user-result-check").html('<img src="/Content/images/not-available.png" title="Tên đăng nhập phải từ 3 đến 9 ký tự" />'); return false; }
            if (username.length > 9) { $("#user-result-check").html('<img src="/Content/images/not-available.png" title="Tên đăng nhập chỉ từ 3 đến 9 ký tự"/>'); return false; }

            $("#user-result-check").html('<img src="/Content/images/ajax-loader.gif" />');
            $.get('/Account/checkUserName?username=' + username, function (data) {
                $("#user-result-check").html('<img src="' + data + '" />');
                return false;
            });

        });

        $("#Email").keyup(function (e) {

            //removes spaces from username
            $(this).val($(this).val().replace(/\s/g, ''));

            var emails = $(this).val();

            if (validateEmail(emails) == false) {
                $("#email-result-check").html('<img src="/Content/images/not-available.png" title="Email bạn nhập sai định dạng" />'); return false;
            }

            $("#email-result-check").html('<img src="/Content/images/ajax-loader.gif" />');
            $.get('/Account/checkUserEmail?email=' + emails, function (data) {
                $("#email-result-check").html('<img src="' + data + '" />');
                return false;
            });

        });

    });

    function completedAjaxRequest(obj) {
        var returnObj = eval('(' + obj.responseText + ')');
        if (returnObj.Status == "success") {
            window.location.href = "/Account/RegisterSccuess?key=" + returnObj.RedirectUrl;

        } else {
            makeErrorHighlight(returnObj.Message);
            $(".formdangky").unmask();
        }
        return false;
    }

    function makeErrorHighlight(messageStr) {
        var $highlight = $("<div style='padding: 0.7em; margin-bottom:5px; width: inherit;'><p><span class='' style='float: left;'></span><strong>Lỗi: </strong>" + messageStr + "</p></div>");
        $highlight.addClass("ui-state-highlight ui-corner-all");
        $highlight.prependTo(".warning-area");
        $(window).scrollTop(100);
        $highlight.delay(4000).fadeOut(500);

    }

</script>